import { useState } from 'react';
import './App.css';

const DEFAULT_TIMEDATA =[
  {
    name: '上挂时间(s)',
    time: 7,
  },
  {
    name: '下放时间(s)',
    time: 3,
  },
  {
    name: '重复次数',
    time: 6,
  },
  {
    name: '组间休息(s)',
    time: 90,
  },
]

function App() {
  const [timeData, setTimeData] = useState(DEFAULT_TIMEDATA);
  const [nowTime, setNowTime] = useState(0);

  return (
    <div className="App">
      <div className='title'>计时器</div>
      {timeData.map((item,index)=>(<div className='part' key={index}>
        <div className='name'>{item.name}</div>
        <input 
          className='value' 
          type='number' 
          value={item.time} 
          onChange={(e)=>{
            console.log(e.target.value,item,timeData);
          }}
        />
      </div>))}
      <div className='btns'>
        <button style={{marginRight:'10px'}} onClick={()=>{

        }}>开始</button>
        <button onClick={()=>{
          setTimeData(DEFAULT_TIMEDATA)
        }}>重置</button>
      </div>
      <div className='nowTime'>

      </div>
    </div>
  );
}

export default App;
